<template>
  <Form
    ref="saleForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    inline
    style="width: 100%">
    <FormItem prop="name" style="width: 15%">
      <Input type="text" v-model="form.name" placeholder="请输入姓名" />
    </FormItem>
    <FormItem prop="tel" style="width: 15%">
      <Input type="text" v-model="form.tel" placeholder="请输入手机号" />
    </FormItem>
    <!-- <FormItem prop="wechat" style="width: 15%">
      <Input type="text" v-model="form.wechat" placeholder="请输入微信号" />
    </FormItem> -->
    <FormItem prop="type" style="width: 15%">
      <Select v-model="form.type" clearable placeholder="请选择类型">
        <Option value="CPA">
          CPA
        </Option>
        <Option value="CPV">
          CPV
        </Option>
        <Option value="CPS">
          CPS
        </Option>
      </Select>
    </FormItem>
    <FormItem prop="state" style="width: 15%">
      <Select v-model="form.state" clearable placeholder="请选择状态">
        <Option value="0">
          记录
        </Option>
        <Option value="1">
          到司复核
        </Option>
        <Option value="2">
          成单复核
        </Option>
      </Select>
    </FormItem>
    <FormItem style="float: right">
      <Button @click="handleSubmit" icon="md-search" type="primary">
        搜索
      </Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'SaleForm',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    telRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    // wechatRules: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   }
    // },
    typeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      form: {
        name: '',
        tel: '',
        // wechat: '',
        type: '',
        state: ''
      }
    }
  },
  computed: {
    rules () {
      return {
        name: this.nameRules,
        tel: this.telRules,
        // wechat: this.wechatRules,
        type: this.typeRules,
        state: this.stateRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.saleForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            name: this.form.name,
            tel: this.form.tel,
            // wechat: this.form.wechat,
            type: this.form.type,
            state: this.form.state ? parseInt(this.form.state) : ''
          })
        }
      })
    }
  }
}
</script>
